<!--
 * hi-filter - 过滤器
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 单选 -->
        <module-demo title="单选" tips="该组件只提供布局，不提供逻辑处理">
            <hi-filter-tabs
                class="filter-tabs"
                :list="items"
                :value="value1"
                @itemClick="handleItemClick1"
                :right="rightItems"
                @rightClick="handleRightClick"
                bg="#ffffff"
            ></hi-filter-tabs>
        </module-demo>

        <!-- 多选 -->
        <module-demo title="多选">
            <hi-filter-tabs
                class="filter-tabs"
                :list="items"
                :value="value2"
                @itemClick="handleItemClick2"
                :right="rightItems"
                @rightClick="handleRightClick"
                bg="#ffffff"
            ></hi-filter-tabs>
        </module-demo>

        <!-- 两端对齐 -->
        <module-demo title="两端对齐">
            <hi-filter-tabs
                class="filter-tabs"
                :list="items"
                :value="value1"
                @itemClick="handleItemClick1"
                :right="rightItems"
                @rightClick="handleRightClick"
                bg="#ffffff"
                justify
            ></hi-filter-tabs>
        </module-demo>

        <!-- 等分布局 -->
        <module-demo title="等分布局">
            <hi-filter-tabs
                class="filter-tabs"
                :list="items"
                :value="value1"
                @itemClick="handleItemClick1"
                :right="rightItems"
                @rightClick="handleRightClick"
                bg="#ffffff"
                equal
            ></hi-filter-tabs>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 选中项
    const value1 = ref(-1);
    const value2 = ref([]);

    // 筛选项
    const items = ref([
        { value: 1, label: "热销", icon: "__rexiao" },
        { value: 2, label: "新品", icon: "__xinpin" },
        { value: 3, label: "价格", icon: "__paixu" }
    ]);

    const rightItems = ref([{ label: "筛选", icon: "__shaixuan" }]);

    /**
     * 筛选项点击事件
     * @param {Object} item 选项数据
     * @param {Number} index 选项索引
     */
    function handleItemClick1(item, index) {
        value1.value = item.value;
    }

    /**
     * 筛选项点击事件
     * @param {Object} item 选项数据
     * @param {Number} index 选项索引
     */
    function handleItemClick2(item, index) {
        if (value2.value.includes(item.value)) {
            value2.value.splice(value2.value.indexOf(item.value), 1);
        } else {
            value2.value.push(item.value);
        }
    }

    // 筛选
    function handleRightClick() {
        uni.showToast({
            title: "筛选",
            icon: "none",
            mask: true
        });
    }
</script>

<style lang="scss" scoped>
    :deep(.module-demo__body) {
        align-items: stretch;
    }

    .hi-filter-tabs.filter-tabs {
        --hi-filter-tabs-background: #ffffff;
        padding: 0.75em 1em;
        width: 100%;
    }
</style>
